<template>
    <div class="home-main-container">

        <!-- SEO信息 -->

        <Head>
            <Title>{{ settingInfo.title }}</Title>
            <Meta name="description" content="" />
        </Head>

        <!-- 布局开始 -->
        <NuxtLayout name="home">

            <!-- 布局左侧 -->
            <template #left>
                <!-- 左侧正文开始 -->
                <t-row :gutter="15">
                    <t-col class="p-[15px] cursor-pointer" :span="4" v-for="(item, index) in contentList.data.list"
                        :key="index">
                        <NuxtLink :to="`/topic/${item.cs_id}`">
                            <t-card class="min-h-[135px] shadow-xl flex flex-col">
                                <t-image :src="item.thumbnail" fit="contain"
                                    :style="{ width: '100%', height: '135px' }" />
                                <div class="topic-title text-center text-[16px] font-[500] pt-[15px] hover:text-[#0052d9] transition duration-700 ease-in-out">{{ item.title }}
                                </div>
                            </t-card>
                        </NuxtLink>
                    </t-col>
                </t-row>
            </template>

            <!-- 右侧布局 -->
            <template #right>
                <!-- 最新 -->
                <tile-new-publish></tile-new-publish>
                <!-- 推荐 -->
                <tile-recommend></tile-recommend>
            </template>
        </NuxtLayout>
    </div>
</template>

<script setup>
// 站点信息
const settingInfo = ref({});

// 分页信息
const tablePagination = reactive({
    defaultCurrent: 1,
    defaultPageSize: 15,
    total: 0
})

// 点赞
const clickLikeIconHandle = () => {
    alert('暂时关闭');
}

// 主题列表
const { data: contentList } = await useFetch(`${baseUrl}/content/list/table/${tablePagination.defaultCurrent}/${tablePagination.defaultPageSize}`);

// 获取站点信息
const { data: settingInfos } = await useFetch(`${baseUrl}/setting/query/basic`);
settingInfo.value = JSON.parse(settingInfos.value.data.content)

</script>

<style lang="scss" scoped></style>